<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动停止后执行/防抖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            height: 3000px;
            margin: 0 20px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // window.addEventListener('scroll', function(event) {
        //   //console.log(event)
        //   // 得到滚动的偏移量 出发太多次
        //   // 如何在最后一次触发？
        //   // 不是监听滚动事件， 当事件停止后， 执行回调函数
        // }, false);

        // const onScrollStop = callback => {  //思路,第一步
        //     window.addEventListener(
        //         'scroll',
        //         e => {
        //             callback();
        //         }
        //         )
        // }
        const onScrollStop = callback => {
            let isScrolling; // 闭包空间中 存放定时器的ＩＤ
            console.log('------');
            window.addEventListener(
                
                'scroll',
                e => {
                    var a = clearTimeout(isScrolling);
                    //var a = clearInterval(isScrolling);
                    // 频繁滚动时不执行
                    // if () // 最后一次滚动？  
                    //console.log(a,'//');
                    isScrolling = setTimeout(() => { //
                        callback();
                        console.log('*******');
                    }, 150)
                    console.log('/////////////');
                    //callback();
                    
                    //console.log(isScrolling,'**');
                }
            )
        }
        onScrollStop(() => {
            console.log('The user has stopped scrolling');
        })
    </script>
</body>
</html>